<template name="skeleton">
  <view is="components/swiper/SwiperIndex" style="scroll-snap-align: none;">
    <view class="content SwiperIndex--content">
      <view class="u-demo-block SwiperIndex--u-demo-block">
        <view class="u-swiper swiper--u-swiper data-v-eda42115 swiper--data-v-eda42115"
              style="background-color:#ffffff;height:130px;border-radius:5px">
          <swiper class="u-swiper__wrapper swiper--u-swiper__wrapper data-v-eda42115 swiper--data-v-eda42115"
                  :current="0" :display-multiple-items="1" :duration="300" easing-function="default"
                  :interval="2000" next-margin="30px" previous-margin="30px" style="flex:1;height:130px"
                  :autoplay="false" :circular="true">
            <swiper-item
                class="u-swiper__wrapper__item swiper--u-swiper__wrapper__item data-v-eda42115 swiper--data-v-eda42115"
                style="position: absolute; width: 100%; height: 100%; transform: translate(0%, 0px) translateZ(0px);">
              <view
                  class="u-swiper__wrapper__item__wrapper swiper--u-swiper__wrapper__item__wrapper data-v-eda42115 swiper--data-v-eda42115"
                  style="border-radius:5px;transform:scale(0.92);">
                <image
                    class="u-swiper__wrapper__item__wrapper__image swiper--u-swiper__wrapper__item__wrapper__image data-v-eda42115 swiper--data-v-eda42115 sk-image"
                    mode="aspectFill" style="height:130px;border-radius:5px"></image>
              </view>
            </swiper-item>
          </swiper>
          <view
              class="u-swiper__indicator swiper--u-swiper__indicator data-v-eda42115 swiper--data-v-eda42115"
              style="true"></view>
        </view>
      </view>
    </view>
  </view>
  <view is="components/circle-panel/CirclePanel" class="r r" style="scroll-snap-align: none;">
    <view class="content CirclePanel--content">
      <view is="components/uni-section/uni-section">
        <view class="uni-section section--uni-section">
          <view class="uni-section-header section--uni-section-header">
            <view
                class="uni-section-header__decoration section--uni-section-header__decoration line section--line">
            </view>
            <view class="uni-section-header__content section--uni-section-header__content">
              <text
                  class="uni-section__content-title section--uni-section__content-title distraction section--distraction sk-transparent sk-text-14-2857-637 sk-text"
                  style="font-size:14px;color:#333">精选圈子</text>
            </view>
            <view class="uni-section-header__slot-right section--uni-section-header__slot-right"></view>
          </view>
          <view class="uni-section-content section--uni-section-content" style="padding:">
            <view class="circle CirclePanel--circle">
              <view class="circle-item CirclePanel--circle-item" hover-class="circle-item-hover">
                <image class="icon CirclePanel--icon sk-image"></image>
                <text
                    class="text CirclePanel--text sk-transparent sk-text-14-2857-565 sk-text">技术</text>
              </view>
              <view class="circle-item CirclePanel--circle-item" hover-class="circle-item-hover">
                <image class="icon CirclePanel--icon sk-image"></image>
                <text
                    class="text CirclePanel--text sk-transparent sk-text-14-2857-289 sk-text">旅行</text>
              </view>
              <view class="circle-item CirclePanel--circle-item" hover-class="circle-item-hover">
                <image class="icon CirclePanel--icon sk-image"></image>
                <text
                    class="text CirclePanel--text sk-transparent sk-text-14-2857-597 sk-text">游戏</text>
              </view>
              <view class="circle-item CirclePanel--circle-item" hover-class="circle-item-hover">
                <image class="icon CirclePanel--icon sk-image"></image>
                <text
                    class="text CirclePanel--text sk-transparent sk-text-14-2857-274 sk-text">摄影</text>
              </view>
              <view class="circle-item CirclePanel--circle-item" hover-class="circle-item-hover">
                <image class="icon CirclePanel--icon sk-image"></image>
                <text
                    class="text CirclePanel--text sk-transparent sk-text-14-2857-825 sk-text">健身</text>
              </view>
              <view class="circle-item CirclePanel--circle-item" hover-class="circle-item-hover">
                <image class="icon CirclePanel--icon sk-image"></image>
                <text
                    class="text CirclePanel--text sk-transparent sk-text-14-2857-394 sk-text">投资</text>
              </view>
              <view class="circle-item CirclePanel--circle-item" hover-class="circle-item-hover">
                <image class="icon CirclePanel--icon sk-image"></image>
                <text
                    class="text CirclePanel--text sk-transparent sk-text-14-2857-764 sk-text">读书</text>
              </view>
              <view class="circle-item CirclePanel--circle-item" hover-class="circle-item-hover">
                <image class="icon CirclePanel--icon sk-image"></image>
                <text
                    class="text CirclePanel--text sk-transparent sk-text-14-2857-341 sk-text">美食</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <!-- 热点文章骨架屏 -->
  <view is="components/hot-digest/HotDigest" class="r r" style="scroll-snap-align: none;">
    <view class="post-list HotDigest--post-list">
      <view is="components/uni-section/uni-section">
        <view class="uni-section section--uni-section">
          <view class="uni-section-header section--uni-section-header">
            <view
                class="uni-section-header__decoration section--uni-section-header__decoration line section--line">
            </view>
            <view class="uni-section-header__content section--uni-section-header__content">
              <text
                  class="uni-section__content-title section--uni-section__content-title distraction section--distraction sk-transparent sk-text-14-2857-442 sk-text"
                  style="font-size:14px;color:#333">热点文章</text>
            </view>
            <view class="uni-section-header__slot-right section--uni-section-header__slot-right"></view>
          </view>
          <view class="uni-section-content section--uni-section-content" style="padding:">
            <view class="waterfall-container HotDigest--waterfall-container">
              <view class="waterfall-column HotDigest--waterfall-column">
                <navigator class="post-item HotDigest--post-item">
                  <view class="image-container HotDigest--image-container">
                    <image class="image HotDigest--image sk-image" mode="widthFix"
                           style="height: 160.234px;"></image>
                  </view>
                  <view class="post-content HotDigest--post-content">
                    <text
                        class="post-title HotDigest--post-title sk-transparent sk-text-15-0000-794 sk-text">Vue3组合式API详解</text>
                    <text
                        class="post-desc HotDigest--post-desc sk-transparent sk-text-16-6667-922 sk-text">深入理解Vue3的Composition API，包括响应式原理、生命周期钩子等核心概念...</text>
                    <view class="post-meta HotDigest--post-meta">
                      <text
                          class="meta-item HotDigest--meta-item sk-transparent sk-text-14-2857-204 sk-text">888</text>
                      <text
                          class="meta-item HotDigest--meta-item sk-transparent sk-text-14-2857-100 sk-text">❤️
                        15</text>
                    </view>
                  </view>
                </navigator>
              </view>
              <view class="waterfall-column HotDigest--waterfall-column">
                <navigator class="post-item HotDigest--post-item">
                  <view class="image-container HotDigest--image-container">
                    <image class="image HotDigest--image sk-image" mode="widthFix"
                           style="height: 142.188px;"></image>
                  </view>
                  <view class="post-content HotDigest--post-content">
                    <text
                        class="post-title HotDigest--post-title sk-transparent sk-text-15-0000-909 sk-text">TypeScript进阶实战</text>
                  </view>
                </navigator>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view is="components/recommend/RecommendPost" class="r r">
    <view class="post-list RecommendPost--post-list">
      <view is="components/uni-section/uni-section">
        <view class="uni-section section--uni-section">
          <view class="uni-section-header section--uni-section-header">
            <view
                class="uni-section-header__decoration section--uni-section-header__decoration line section--line">
            </view>
            <view class="uni-section-header__content section--uni-section-header__content">
              <text
                  class="uni-section__content-title section--uni-section__content-title distraction section--distraction sk-transparent sk-text-14-2857-442 sk-text"
                  style="font-size:14px;color:#333">为你推荐</text>
            </view>
            <view class="uni-section-header__slot-right section--uni-section-header__slot-right"></view>
          </view>
          <view class="uni-section-content section--uni-section-content" style="padding:">
            <view class="waterfall-container RecommendPost--waterfall-container">
              <view class="waterfall-column RecommendPost--waterfall-column">
                <navigator class="post-item RecommendPost--post-item">
                  <view class="image-container RecommendPost--image-container">
                    <image class="image RecommendPost--image sk-image" mode="widthFix"
                           style="height: 175.156px;"></image>
                  </view>
                  <view class="post-content RecommendPost--post-content">
                    <text
                        class="post-title RecommendPost--post-title sk-transparent sk-text-15-0000-794 sk-text">Python异步编程最佳实践</text>
                  </view>
                </navigator>
              </view>
              <view class="waterfall-column RecommendPost--waterfall-column">
                <navigator class="post-item RecommendPost--post-item">
                  <view class="image-container RecommendPost--image-container">
                    <image class="image RecommendPost--image sk-image" mode="widthFix"
                           style="height: 116.771px;"></image>
                  </view>
                  <view class="post-content RecommendPost--post-content">
                    <text
                        class="post-title RecommendPost--post-title sk-transparent sk-text-15-0000-909 sk-text">Docker容器化部署指南</text>
                    <text
                        class="post-desc RecommendPost--post-desc sk-transparent sk-text-16-6667-922 sk-text">从零开始学习Docker，包括镜像制作、容器管理、网络配置等核心概念，适合初学者入门...</text>
                    <view class="post-meta RecommendPost--post-meta">
                      <text
                          class="meta-item RecommendPost--meta-item sk-transparent sk-text-14-2857-204 sk-text">1002</text>
                      <text
                          class="meta-item RecommendPost--meta-item sk-transparent sk-text-14-2857-100 sk-text">❤️
                        2</text>
                    </view>
                  </view>
                </navigator>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style>
.sk-transparent {
  color: transparent !important;
}

.sk-text-3-5714-670 {
  background-image: linear-gradient(transparent 3.5714%, #EEEEEE 0%, #EEEEEE 96.4286%, transparent 0%) !important;
  background-size: 100% 28.0000rpx;
  position: relative !important;
}

.sk-text {
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: repeat-y !important;
}

.sk-text-14-2857-429 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 39.2000rpx;
  position: relative !important;
}

.sk-text-14-2857-637 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 39.2000rpx;
  position: relative !important;
}

.sk-text-14-2857-565 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 36.4000rpx;
  position: relative !important;
}

.sk-text-14-2857-289 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 36.4000rpx;
  position: relative !important;
}

.sk-text-14-2857-597 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 36.4000rpx;
  position: relative !important;
}

.sk-text-14-2857-274 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 36.4000rpx;
  position: relative !important;
}

.sk-text-14-2857-825 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 36.4000rpx;
  position: relative !important;
}

.sk-text-14-2857-394 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 36.4000rpx;
  position: relative !important;
}

.sk-text-14-2857-764 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 36.4000rpx;
  position: relative !important;
}

.sk-text-14-2857-341 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 36.4000rpx;
  position: relative !important;
}

.sk-text-14-2857-442 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 39.2000rpx;
  position: relative !important;
}

.sk-text-15-0000-794 {
  background-image: linear-gradient(transparent 15.0000%, #EEEEEE 0%, #EEEEEE 85.0000%, transparent 0%) !important;
  background-size: 100% 40.0000rpx;
  position: relative !important;
}

.sk-text-15-0000-909 {
  background-image: linear-gradient(transparent 15.0000%, #EEEEEE 0%, #EEEEEE 85.0000%, transparent 0%) !important;
  background-size: 100% 40.0000rpx;
  position: relative !important;
}

.sk-text-16-6667-922 {
  background-image: linear-gradient(transparent 16.6667%, #EEEEEE 0%, #EEEEEE 83.3333%, transparent 0%) !important;
  background-size: 100% 36.0000rpx;
  position: relative !important;
}

.sk-text-14-2857-204 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 30.8000rpx;
  position: relative !important;
}

.sk-text-14-2857-100 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 30.8000rpx;
  position: relative !important;
}

.sk-image {
  background: #EFEFEF !important;
}

.sk-pseudo::before,
.sk-pseudo::after {
  background: #EFEFEF !important;
  background-image: none !important;
  color: transparent !important;
  border-color: transparent !important;
}

.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
  border-radius: 0 !important;
}

.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
  border-radius: 50% !important;
}

.sk-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}
</style>
